import React, { Component } from 'react';
// 引入需要的页面组件
import Home from './Home';
import Category from './Category';
import Car from './Car';
import Mine from './Mine';
import Notfind from './Notfind';
import { Route, Redirect, Switch, withRouter } from 'react-router-dom'
// 一般设置react路由的规则的时候,
// 01:  每次都需要使用Switch 组件baoguo
// 02: 设置重定向路由一定设置严格模式
// 03: 404路由没有 path 属性

class Ruls extends Component {
    render() {
        return (
            <div>
                <Switch>
                    {/* <Route path='/home' component={Home}></Route> */}
                    {/* 路由的渲染方式:3种
                        01: 使用component 属性执行要渲染的组件  
                            // 写法1: compoennt={组件名} (常用第一种) 不丢失props
                            // 写法2: component={()=>组件名}  丢失props
                                // 该中写法默认丢失location,history,match 这三个属性
                                // 无法获取参数, 无法实现编程式导航跳转
                                // 解决方案: 给函数的形参添加props属性
                        02: 使用render 属性渲染组件  
                            // render 只支持函数形式,会丢失props
                            语法: render={(props)=><组件名 {...props}></组件名>}

                        03: 使用children 属性渲染组件
                            // 写法1: 直接赋值组件,会丢失props, 
                             语法: children={<组件名 {....this.props}></组件名>} 
                            // 写法2: 函数形式 会丢失props
                             语法: children={(props)=><组件名{...props}></组件名>}

                     */}

                    <Route path='/home' component={(props) => <Home {...props} />}></Route>
                    {/* 使用render */}
                    {/* <Route path='/category' component={Category}></Route> */}
                    <Route path='/category' render={(props) => <Category {...props}></Category>}></Route>
                    {/* <Route path='/car' component={Car}></Route> */}
                    {/* <Route path='/car' children={<Car {...this.props}></Car>}></Route> */}
                    <Route path='/car' children={(props) => <Car {...props}></Car>}></Route>
                    {/* <Route path='/mine/:id?' component={Mine}></Route> */}
                    <Route path='/mine' component={Mine} ></Route>
                    {/* 
                        重定向路由: 一般设置在路由规则的最后面, 当其他路由规则都不匹配的时候, 再执行当前的重定向
                        严格模式可加可不加
                    */}
                    <Redirect from='/' to='/home' exact></Redirect>
                    {/* 
                        配置404路由: 
                        注意: 不用设置 path属性, 因为你也不知道具体会出现什么样的错误path,所以干脆不写
                        一般将404路由写在当前路由规则的最下方
                        为了保证每次只匹配一个路由规则, 需要使用Switch 组件将所有的路由规则进行包裹
                        这样就保证被包裹的路由规则中,每次只能匹配一个路由规则    
                     */}
                    <Route component={Notfind}></Route>
                </Switch>
            </div>
        );
    }
}



export default withRouter(Ruls);
